<script setup lang="ts">
import PageWithoutStatusBar from "@/components/page-without-status-bar/PageWithoutStatusBar.vue";
import DynamicGradientBg from "@/pages/login-register/components/dynamic-gradient-bg/DynamicGradientBg.vue";
import FlyToPlanetAnima from "@/pages/login-register/components/fly-to-planet-anima/FlyToPlanetAnima.vue";
import LoginForm from "@/pages/login-register/components/login-form/LoginForm.vue";
</script>

<template>
  <!-- 登陆注册页面 -->
  <!-- 该页面参考自：https://www.bilibili.com/video/BV1Zs4y1Z7KZ/ -->
  <!-- 视频对应的源码仓库地址：https://gitee.com/mao-yongyao/404-page -->
  <view class="login-register-page">
    <!-- 动态渐变背景 -->
    <DynamicGradientBg>
      <!-- 不包括状态栏的页面组件 -->
      <PageWithoutStatusBar>
        <!-- 飞向星球动画 -->
        <view class="fly-to-planet-anima-box">
          <FlyToPlanetAnima></FlyToPlanetAnima>
        </view>
        <!-- 表单盒子 -->
        <view class="form-box">
          <!-- 登录表单 -->
          <LoginForm></LoginForm>
          <!-- 注册表单 -->
          <view class="register-form"></view>
        </view>
      </PageWithoutStatusBar>
    </DynamicGradientBg>
  </view>
</template>

<style scoped lang="scss">
// 登陆注册页面
.login-register-page {

  // 飞向星球动画盒子
  .fly-to-planet-anima-box {
    padding: 30rpx 0;
  }
}
</style>
